<template>
  <div class="project-purchase-detail-container">
    <card style="margin: .2rem">
      <div class="van-hairline--bottom headTitle">
        <van-icon name="arrow-left" @click="back" />
        {{ title }}
      </div>
      <van-tabs v-model="active">
        <van-tab title="基本信息">
          <project-purchase-detail />
        </van-tab>
        <van-tab title="跟进信息" v-if="pageType == 1">
          <project-purchase-fllow />
        </van-tab>
        <van-tab title="中标信息" v-if="pageType == 1">
          <project-purchase-tender />
        </van-tab>
      </van-tabs>
    </card>
  </div>
</template>

<script>
import Card from "@/components/Card";
import { Skeleton, Tab, Tabs, Button, Icon } from "vant";
import ProjectPurchaseDetail from "./ProjectPurchaseDetail";
import ProjectPurchaseTender from "./ProjectPurchaseTender";
import ProjectPurchaseFllow from "./ProjectPurchaseFllow";
export default {
  components: {
    [Skeleton.name]: Skeleton,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    Card,
    ProjectPurchaseDetail,
    ProjectPurchaseTender,
    ProjectPurchaseFllow
  },
  data() {
    return {
      title: "",
      pageType: 0,
      active: 0
    };
  },
  created() {
    if (this.$route.query.type == "add") {
      this.title = "添加集采项目报备";
      document.title = "添加集采项目报备";
      this.pageType = 0;
    } else {
      this.title = "编辑集采项目报备";
      document.title = "编辑集采项目报备";
      this.pageType = 1;
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.project-purchase-detail-container {
  background-image: linear-gradient(rgb(216, 231, 240), white);
  padding: 12px;
  .headTitle {
    font-size: 24px;
    padding-bottom: 12px;
    align-items: center;
    display: flex;
    .headTitleBackBtn {
      width: 40px;
      margin-right: 8px;
    }
  }
}
</style>